<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>林华明&李嘉欣</title>
	<style>
		body, html {
		margin: 0;
		padding: 0;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: black;
		font-family: "Arial", sans-serif;
		color: white;
		overflow: hidden; /* 防止爱心雨滚动出界 */
		}

		.container {
		text-align: center;
		position: relative;
		z-index: 2; /* 确保文字在最上面 */
		}

		h1 {
		font-size: 3rem;
		opacity: 0;
		animation: fadeInOut 4s ease-in-out infinite;
		}

		@keyframes fadeInOut {
		0%, 100% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		}

		#heart-rain {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; /* 让爱心雨不影响页面上的其他元素 */
		z-index: 1;
		}

		.heart {
		position: absolute;
		font-size: 1.5rem;
		color: red;
		animation: fall 5s linear infinite;
		}

		@keyframes fall {
		0% {
			transform: translateY(-100px); /* 从屏幕上方开始 */
			opacity: 1;
		}
		100% {
			transform: translateY(100vh); /* 直到屏幕底部 */
			opacity: 0;
		}
		}

	</style>
</head>
<body>
    <div class="container">
        <h1 id="text"></h1>
    </div>
    <div id="heart-rain"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
		$(document).ready(function() {
		let text = "林华明❤李嘉欣";
		let index = 0;

		// 清空初始内容
		$("#text").text("");

		function type() {
		if (index < text.length) {
			$("#text").append(text[index]);
			index++;
			setTimeout(type, 300); // 300ms每次展示一个字
		}
		}

		type(); // 启动打字动画

		// 创建爱心雨效果
		function createHeartRain() {
		setInterval(function() {
			let heart = $('<div class="heart">❤️</div>');
			let xPos = Math.random() * window.innerWidth; // 随机横坐标
			let delay = Math.random() * 2 + 1; // 随机掉落速度

			heart.css({
				left: xPos,
				animationDuration: `${delay + 3}s`, // 动画时长
			});

			$("#heart-rain").append(heart);

			// 动画结束后移除爱心
			heart.on('animationend', function() {
				heart.remove();
			});
		}, 200); // 每200ms生成一个新的爱心
		}

		createHeartRain(); // 启动爱心雨效果
		});
	</script>
</body>
</html>
